<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebSocket</title>
<style type="text/css">
html, body {
	margin: 0 0;
	height: 100%;
}
</style>
</head>
<body>
	<div style="width: 100%; height: 100%;">
		<div id="output" style="width: 99%; height: calc(100% - 50px); overflow-y: scroll; border: 1px solid #eeeeff;">
			<!--  -->
		</div>
		<input id="input" type="text" value="" style="width: 480px;">
		<button onclick="fnSend()">submit</button>
	</div>
	<script type="text/javascript">
		var elInput = document.getElementById('input');
		var elOutput = document.getElementById('output');

		function appendLog(message) {
			var item = document.createElement("div");
			item.innerHTML = '<b>' + message + '</b>';
			document.getElementById('output').appendChild(item);
		}

		var ws = new WebSocket('ws://localhost:6001/');
		ws.onclose = function(event) {
		};
		ws.onmessage = function(event) {
			appendLog(event.data)
		}
		var fnSend = function() {
			var message = elInput.value;
			if (message !== '') {
				ws.send(message)
			}
		}
	</script>

</body>
</html>